<template>
  <div class="box-content">
    <div class="flex items-center convention-type-main-text">
      <div :style="{ backgroundColor: setPrimaryColor }" class="h-4 mr-2"></div>
      <span> 权限设置 </span>
    </div>
    <div class="list-box">
      <div class="convention-title">
        <span> 班主任权限组 </span>
      </div>
      <Form :model="formStateHeadmaster">
        <Form.Item name="people" label="权限人员：">
          <div class="people-box">{{ formStateHeadmaster.people }}</div>
        </Form.Item>
        <Form.Item name="adminArea" label="管理范围：">
          <a-radio-group v-model:value="formStateHeadmaster.adminArea">
            <a-radio value="0">全部</a-radio>
            <a-radio value="1">管理的</a-radio>
          </a-radio-group>
        </Form.Item>
      </Form>
    </div>
    <!-- 年级主任权限组 -->
    <div class="mt-6 list-box">
      <div class="convention-title">
        <span> 年级主任权限组 </span>
      </div>
      <Form :model="formStateExaminer">
        <Form.Item name="people" label="权限人员：">
          <div class="people-box">{{ formStateExaminer.people }}</div>
        </Form.Item>
        <Form.Item name="adminArea" label="管理范围：">
          <a-radio-group v-model:value="formStateExaminer.adminArea">
            <a-radio value="0">全部</a-radio>
            <a-radio value="1">管理的</a-radio>
          </a-radio-group>
        </Form.Item>
      </Form>
    </div>
    <!-- 宿管权限组 -->
    <div class="mt-6 list-box">
      <div class="convention-title">
        <span> 宿管权限组 </span>
      </div>
      <Form :model="formStateExaminer">
        <Form.Item name="people" label="权限人员：">
          <div class="people-box">{{ formStateDormitory.people }}</div>
        </Form.Item>
        <Form.Item name="adminArea" label="管理范围：">
          <a-radio-group v-model:value="formStateDormitory.adminArea">
            <a-radio value="0">全部</a-radio>
            <a-radio value="1">管理的</a-radio>
          </a-radio-group>
        </Form.Item>
      </Form>
    </div>
    <div class="jurisdiction-save">
      <a-button type="primary" :loading="btnLoading" @click="UpdatePermission()"> 保存 </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import store from '@/store/index.js';
import { Form, message } from 'ant-design-vue';
const setPrimaryColor = computed(() => store.state.user.primaryColor);
import { updatePermission, getTimePermission } from '@/api/ruleSetting';
import { debounce } from '@/utils/debounce.js';
const id = ref('');
// 班主任明细表
const formStateHeadmaster = ref({
  people: '所有班主任',
  adminArea: '0',
  adminJurisdiction: ['3']
});

// 年级主任权限组
const formStateExaminer = ref({
  people: '所有年级班主任',
  adminArea: '0',
  adminJurisdiction: ['1', '2', '3']
});
// 宿管权限组
const formStateDormitory = ref({
  people: '所有宿管',
  adminArea: '0',
  adminJurisdiction: ['1', '2', '3']
});
onMounted(() => {
  GetTimePermission();
});
function GetTimePermission(type) {
  getTimePermission().then(res => {
    console.log('查询权限', res);
    if (res.data.code === 200) {
      formStateHeadmaster.value.adminArea = res.data.data.headmaster + '';
      formStateExaminer.value.adminArea = res.data.data.gradeDirector + '';
      formStateDormitory.value.adminArea = res.data.data.hostel + '';
      id.value = res.data.data.id;
    }
  });
}
const btnLoading = ref(false);
const UpdatePermission = debounce(function (type) {
  let data = {
    id: id.value || '',
    headmaster: formStateHeadmaster.value.adminArea, // 班主任权限0全部 1管理
    gradeDirector: formStateExaminer.value.adminArea, // 年级主任 0全部 1管理
    hostel: formStateDormitory.value.adminArea // 宿管权限 0全部 1管理
  };
  btnLoading.value = true;
  updatePermission(data)
    .then(res => {
      console.log('保存', res);
      btnLoading.value = false;
      if (res.data.code === 200) {
        message.success('保存成功');
      } else {
        message.warning(res.data.msg);
      }
    })
    .catch(() => {
      btnLoading.value = false;
    });
}, 500);
</script>

<style lang="less" scoped>
.list-box {
  width: 100%;
  height: 184px;
  background: #f8f8f8;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 24px;
}

.people-box {
  width: 360px;
  height: 40px;
  background: #f2f2f2;
  border: 1px solid #e1dddd;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 12px;
  font-size: 16px;
  color: #999999;
  line-height: 38px;
  cursor: not-allowed;
  user-select: none;
}

::v-deep(.micro-dormitory-form-item-label) {
  line-height: 40px;
  margin-right: 4px;
  label {
    font-size: 16px;
    color: #222222;
  }
}
::v-deep(.micro-dormitory-form-item) {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.add-btn-box {
  width: 920px;
  height: 68px;
  background: #f8f8f8;
  border-radius: 4px;
}
.box-content {
  height: 560px;
  overflow-y: auto;
  font-size: 14px;
  color: v-bind(setPrimaryColor);
  width: 100%;
  min-height: 100vh;
  background: #fff;
  box-sizing: border-box;
  padding: 24px;
}
.convention-type-main-text {
  font-size: 18px;
  color: #222222;
  margin-bottom: 15px;
  div {
    border-radius: 19px;
    width: 3px;
  }
}
.convention-title {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  margin-bottom: 14px;
}
.jurisdiction-save {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
}
</style>
